<template>
  <Modal
    width="800"
    class="modal-tips"
    v-model="config"
    @on-cancel="cancel"
    :mask-closable="false"
    footer-hide
    :title="title"
  >
    <div class="form-input-area" style="position: relative">
      <Spin :withIcon="true" v-if="loading"></Spin>
      <div v-else class="tips-area tips-icon" style="margin-bottom: 20px">
        转移码的有效期15天，请在有效期内办理域名转移业务！
      </div>
      <div class="step-area flx-row-bw-c">
        <div
          class="step-item"
          :class="[
            index + 1 < step
              ? 'b-arrow3'
              : index + 1 == step
              ? 'b-arrow2'
              : 'b-arrow1',
          ]"
          v-for="(item, index) in stepList"
          :key="index"
        >
          {{ item }}
        </div>
      </div>
      <template v-if="step == 3">
        <div class="c-d2 f-14" style="margin-bottom: 30px; margin-left: 188px">
          转出域名：<span class="c-o f-w-600">www.xiniu.com</span>
        </div>
        <div class="c-d2 f-14" style="margin-bottom: 30px; margin-left: 188px">
          转移码已发送至<span class="c-o f-w-600"
            >l**************g@eims.com.cn</span
          >，请注意查收！
        </div>
        <div class="c-d2 f-16" style="margin-bottom: 30px; margin-left: 188px">
          已收到转移码？<span class="b-form-font-button" style="font-size: 16px"
            >发送确认邮件</span
          >
        </div>
        <div class="c-d2 f-16" style="margin-bottom: 30px; margin-left: 188px">
          未收到转移码？<span class="b-form-font-button" style="font-size: 16px"
            >重新发送</span
          >
        </div>
      </template>
      <template v-else-if="step == 4">
        <div
          class="flx-row-s-c c-d2 f-14"
          style="margin-bottom: 30px; margin-left: 188px"
        >
          <div class="success-icon"></div>
          恭喜你，域名已转出成功
        </div>
        <div class="c-d2 f-14" style="margin-bottom: 30px; margin-left: 230px">
          转出域名：<span class="c-o f-w-600">www.xiniu.com</span>
        </div>
      </template>
    </div>
  </Modal>
</template>

<script>
export default {
  props: {
    title: "",
    show: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      loading: false,
      step: 4,
      stepList: [
        "1.验证手机",
        "2.核对邮箱",
        "3.等待邮件确认",
        "4.域名转出成功",
      ],
    };
  },
  watch: {
    show: {
      handler(newValue) {
        if (newValue) {
          /// console.log(newValue);
        }
      },
    },
  },
  methods: {
    cancel() {
      this.config = false;
    },
  },
  computed: {
    config: {
      get() {
        return this.show;
      },
      set(val) {
        this.$emit("update:show", val);
      },
    },
  },
};
</script>

<style lang="scss" scoped>
.step-area {
  width: fit-content;
  margin-bottom: 32px;

  .step-item {
    @include size(170px, 27px);
    @include bg-setting(null, cover, right);
    color: #fff;
    text-align: center;
    line-height: 27px;
    font-size: 14px;
    margin-right: 5px;

    &.b-arrow1 {
      background-image: url("~_a/images/b-arrow1@2x.png");
    }
    &.b-arrow2 {
      background-image: url("~_a/images/b-arrow2@2x.png");
    }
    &.b-arrow3 {
      background-image: url("~_a/images/b-arrow3@2x.png");
    }
  }
}
.success-icon {
  @include size(40px);
  margin-right: 20px;
  @include bg-setting("pay-success");
}
</style>